<template>
	<view style="width: 100%;">
		<view class="screen-bar" :style="{'height':height + 'rpx',backgroundColor:bgcolor}">
			<view class="screen-bar-item" @tap.stop="itemClick(index)" v-for="(item,index) in updateArr" :key="index"
				:style="{'width':(100/5.2)+'%','fontSize':barFontSize+'rpx','color':(currentIndex==index&&show)?activeColor:barTextColor}">
				<view class="bar-item-text">
					{{item}}
				</view>
				<image :src="arrBase64"
					:style="{'transform': show?currentIndex==index? 'rotate(180deg)':'rotate(0)':'rotate(0)'}"></image>
					
					<!-- <image :src="currentIndex==index?arrBase64Top:arrBase64" 
					:style="{'transform': show?currentIndex==index? 'rotate(180deg)':'rotate(0)':'rotate(0)'}"></image> -->
			</view>
			<!-- <view class="dropdown-box"
				:style="{'bottom':'-' + (itemHeight*maxDropdownLength) + 'rpx','height':(itemHeight*maxDropdownLength) + 'rpx',backgroundColor:bgcolor,'opacity':show?'1':'0','display':show?'block':'none'}">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="dropdown-item"
						:style="{'height':itemHeight+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+'rpx','color':itemTextColor}"
						v-for="(item,index) in itemArr[currentIndex]" :key="index" @tap.stop="subItemClick(index)">
						{{item[showTag]}}
					</view>
				</scroll-view>
			</view> -->
			<!-- 区域 -->
			
			
			<view class="dropdown-box acea-box"
				:style="{'bottom':'-' + (itemHeight*8) + 'rpx','height':(itemHeight*8) + 'rpx',backgroundColor:bgcolor,'opacity':show?'1':'0','display':show?'block':'none'}" v-if="currentIndex==0">
				<view class="aside">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="dropdown-item" v-for="(item,index) in aceaArr" :key="index"
						:style="{'height':itemHeight+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+'rpx','color':(currentAceaAsideIndex==index)?activeColor:itemTextColor}" @tap.stop="currentAceaAsideIndex=index">{{item.type}}</view>
					</scroll-view>
				</view>
				<view class="conter">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="dropdown-item"
						:style="{'height':itemHeight+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+'rpx','color':(currentAceaConterIndex==index)?activeColor:itemTextColor}"
						  v-for="(item,index) in aceaConterArr[currentAceaAsideIndex]" :key="index" @tap.stop="currentAceaConterIndex=index">{{item}}</view>
					</scroll-view>
				</view>
				<view class="acea-row row-middle row-between acea-btn">
					<view class="reset" @tap.top="aceaReset()">重置</view>
					<view class="confirm" @tap.top="aceaConfirm()">确认</view>
				</view>
			</view>
			<!-- 价格 -->
			<view class="dropdown-box"
				:style="{'bottom':'-' + (itemHeight*maxPriceDropdownLength) + 'rpx','height':(itemHeight*maxPriceDropdownLength) + 'rpx',backgroundColor:bgcolor,'opacity':show?'1':'0','display':show?'block':'none'}" v-if="currentIndex==1">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="dropdown-item"
						:style="{'height':itemHeight+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+'rpx','color':itemTextColor}"
						v-for="(item,index) in priceArr" :key="index" @tap.stop="subPriceItemClick(index)">
						{{item[showTag]}}
					</view>
				</scroll-view>
			</view>
			<!-- 品牌 -->
			<view class="dropdown-box"
				:style="{'bottom':'-' + (itemHeight*maxBrandDropdownLength) + 'rpx','height':(itemHeight*maxBrandDropdownLength) + 'rpx',backgroundColor:bgcolor,'opacity':show?'1':'0','display':show?'block':'none'}" v-if="currentIndex==2">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="dropdown-item"
						:style="{'height':itemHeight+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+'rpx','color':itemTextColor}"
						v-for="(item,index) in brandArr" :key="index" @tap.stop="subBrandItemClick(index)">
						{{item[showTag]}}
					</view>
				</scroll-view>
			</view>
			<!-- 排序 -->
			<view class="dropdown-box"
				:style="{'bottom':'-' + (itemHeight*maxSortDropdownLength) + 'rpx','height':(itemHeight*maxSortDropdownLength) + 'rpx',backgroundColor:bgcolor,'opacity':show?'1':'0','display':show?'block':'none'}" v-if="currentIndex==3">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="dropdown-item"
						:style="{'height':itemHeight+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+'rpx','color':itemTextColor}"
						v-for="(item,index) in sortArr" :key="index" @tap.stop="subSortItemClick(index)">
						{{item[showTag]}}
					</view>
				</scroll-view>
			</view>
			
			<!-- 筛选 -->
			<view class="filtrate-box"
				:style="{backgroundColor:bgcolor,'opacity':show?'1':'0','display':show?'block':'none'}" v-if="currentIndex==4&&filtrateShow">
				<view class="aside">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="dropdown-item" v-for="(item,index) in filtrateArr" :key="index"
						:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+4+'rpx','color':(currentFiltrateAsideIndex==index)?activeColor:itemTextColor}" @tap.stop="currentFiltrateAsideIndex=index">{{item.type}}</view>
					</scroll-view>
				</view>
				<view class="conter">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="conter-title" :style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+4+'rpx'}">
							{{filtrateArr[currentFiltrateAsideIndex].type}}
						</view>
						<view :class="['dropdown-item',currentFiltrateConterIndex==index?'on':'']" 
						:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+'rpx','color':(currentFiltrateConterIndex==index)?activeColor:itemTextColor}"
						  v-for="(item,index) in filtrateConterArr[currentFiltrateAsideIndex]" :key="index" @tap.stop="currentFiltrateConterIndex=index">{{item}}</view>
					</scroll-view>
				</view>
				<view class="acea-row row-middle row-between filtrate-btn">
					<view class="reset" @tap.top="filtrateReset()">重置</view>
					<view class="confirm" @tap.top="filtrateConfirm()">确认</view>
				</view>
			</view>
		</view>
		<view class="bg-mask" :class="[show?'bg-mask-show':'']" @tap="maskClose" @touchmove="touchControl"></view>
	</view>

</template>

<script>
	/**
	 *  下拉组件
	 * @author xzj
	 * @create date 2021-4-3
	 * @update user xzj
	 * @update date 2021-4-3
	 * @note 遮罩层级98 筛选条&下拉层层级99
	 **/
	export default {
		name: 'com-dropdown-unused',
		data() {
			return {
				currentIndex: 0,
				currentSubIndex: 0,
				// 区域
				currentAceaAsideIndex:0,
				currentAceaConterIndex:0,
				// 筛选
				currentFiltrateAsideIndex:0,
				currentFiltrateConterIndex:0,
				show: false,
				filtrateShow:false,
				updateArr: [],
				arrBase64:'',
				arrBase64Top:''
			};
		},
		computed: {
			maxDropdownLength() {
				return this.itemArr[this.currentIndex].length > this.maxItemCount ? this.maxItemCount : this.itemArr[this
					.currentIndex].length
			},
			maxPriceDropdownLength() {
				return this.priceArr.length > this.maxItemCount ? this.maxItemCount : this.priceArr.length
			},
			maxBrandDropdownLength() {
				return this.brandArr.length > this.maxItemCount ? this.maxItemCount : this.brandArr.length
			},
			maxSortDropdownLength() {
				return this.sortArr.length > this.maxItemCount ? this.maxItemCount : this.sortArr.length
			},
		},
		props: {
			// 筛选条高度 （rpx）
			height: {
				type: Number,
				default: 88
			},
			// 下拉单项高度
			itemHeight: {
				type: Number,
				default: 80
			},
			// 当前文字活跃颜色
			activeColor: {
				type: String,
				default: '#EE212D'
			},
			//背景颜色
			bgcolor: {
				type: String,
				default: '#fff'
			},
			//下拉标题数组
			listArr: {
				type: Array,
				default: () => {
					return ['区域', '价格', '品牌', '排序','筛选']
				}
			},
			// 区域数组
			aceaArr:{
				type: Array,
				default: ()=>{
					return [
						{type:'地铁',list:['1号线','2号线']},
						{type:'区域',list:['岳麓区','天心区','开福区','雨花区']}
					]
				}
			},
			aceaConterArr:{
				type: Array,
				default: ()=>{
					return [
						['1号线','2号线','3号线','4号线','5号线','6号线','7号线','2号线','2号线'],
						['岳麓区','天心区','开福区','雨花区','雨花区','雨花区','雨花区','雨花区','雨花区','雨花区']
					]
				}
			},
			// 筛选数组
			filtrateArr:{
				type: Array,
				default: ()=>{
					return [
						{type:'地铁',list:['1号线','2号线']},
						{type:'区域',list:['岳麓区','天心区','开福区','雨花区']}
					]
				}
			},
			filtrateConterArr:{
				type: Array,
				default: ()=>{
					return [
						['1号线','2号线','3号线','4号线','5号线','6号线','7号线','2号线','2号线'],
						['岳麓区','天心区','开福区','雨花区','雨花区','雨花区','雨花区','雨花区雨花区雨花区雨花区雨花区雨花区雨花区','雨花区','雨花区']
					]
				}
			},
			// 价格数组
			priceArr:{
				type: Array,
				default: ()=>{
					return [{
							text: '50',
							value: 3
						}, {
							text: '80',
							value: 4
						}, {
							text: '100',
							value: 5
						}, {
							text: '120以上',
							value: 6
						}]
				}
			},
			// 品牌数组
			brandArr:{
				type: Array,
				default: ()=>{
					return [{
							text: 'Nike',
							value: 7
						}, {
							text: '安踏',
							value: 8
						}, {
							text: '鸿星尔克',
							value: 9
						}, {
							text: '特步',
							value: 10
						}]
				}
			},
			sortArr:{
				type: Array,
				default: ()=>{
					return [{
							text: '默认排序',
							value: 11
						}, {
							text: '最新发布',
							value: 12
						}, {
							text: '总价从高到低',
							value: 13
						}, {
							text: '单价从低到搞',
							value: 14
						}, {
							text: '面积从大到小',
							value: 15
						}, {
							text: '面积从小到大',
							value: 16
						}]
				}
			},
			// item数量超过多少开始滚动
			maxItemCount: {
				type: Number,
				default: 5
			},
			//下拉选项数组（二维数组）
			itemArr: {
				type: Array,
				default: () => {
					return [
						[{
							text: '加冰',
							value: 1
						}, {
							text: '去冰',
							value: 2
						}],
						[{
							text: '50',
							value: 3
						}, {
							text: '80',
							value: 4
						}, {
							text: '100',
							value: 5
						}, {
							text: '120以上',
							value: 6
						}],
						[{
							text: 'Nike',
							value: 7
						}, {
							text: '安踏',
							value: 8
						}, {
							text: '鸿星尔克',
							value: 9
						}, {
							text: '特步',
							value: 10
						}],
						[{
							text: '降序',
							value: 11
						}, {
							text: '升序',
							value: 12
						}],
						[{
							text: '附近',
							value: 13
						}, {
							text: '最热',
							value: 14
						}]
					]
				}
			},
			// 选项左偏移
			itemPadding: {
				type: Number,
				default: 24
			},
			// 能否遮罩关闭
			maskTouch: {
				type: Boolean,
				default: true
			},
			// 是否需要选择后替换标题
			isNeedChangeTitle: {
				type: Boolean,
				default: true
			},
			// 标题字号
			barFontSize: {
				type: Number,
				default: 28
			},
			//标题颜色
			barTextColor: {
				type: String,
				default: '#666'
			},
			//下拉字号
			itemFontSize: {
				type: Number,
				default: 28
			},
			// 下拉文字颜色
			itemTextColor: {
				type: String,
				default: '#666'
			},
			// 需要展示的字段，比如你的数据是item.name 这里填的就是name
			showTag: {
				type: String,
				default: 'text'
			},
			// 是否要滑动关闭
			isTouchPrevent: {
				type: Boolean,
				default: true
			},
			// 自定义事件的索引数组
			customIndexArr:{
				type:Array,
				default:()=>{
					return []
				}
			}
		},
		mounted() {
			this.updateArr = [...new Set(this.listArr)]
		},
		methods: {
			itemClick(index) {
				if(this.customIndexArr.includes(index)){
					this.show = false
					this.$emit('customClick',{
						'$index': index
					})
					return
				}
				if(index==this.updateArr.length-1)this.filtrateShow = true
				if (this.currentIndex == index) {
					this.show = !this.show
				} else {
					this.currentIndex = index
					this.show = true
				}
			},
			subItemClick(index) {
				this.currentSubIndex = index
				if (this.isNeedChangeTitle) {
					this.updateArr.splice(this.currentIndex, 1, this.itemArr[this.currentIndex][this.currentSubIndex][this
						.showTag
					])
				}
				this.$emit('finish', {
					'$index': this.currentIndex,
					...this.itemArr[this.currentIndex][this.currentSubIndex]
				})
				this.show = false
			},
			subPriceItemClick(index) {
				this.currentSubIndex = index
				if (this.isNeedChangeTitle) {
					this.updateArr.splice(this.currentIndex, 1, this.priceArr[this.currentSubIndex][this
						.showTag
					])
				}
				this.$emit('finish', {
					'$index': this.currentIndex,
					...this.priceArr[this.currentSubIndex]
				})
				this.show = false
			},
			subBrandItemClick(index) {
				this.currentSubIndex = index
				if (this.isNeedChangeTitle) {
					this.updateArr.splice(this.currentIndex, 1, this.brandArr[this.currentSubIndex][this
						.showTag
					])
				}
				this.$emit('finish', {
					'$index': this.currentIndex,
					...this.brandArr[this.currentSubIndex]
				})
				this.show = false
			},
			subSortItemClick(index) {
				this.currentSubIndex = index
				if (this.isNeedChangeTitle) {
					this.updateArr.splice(this.currentIndex, 1, this.sortArr[this.currentSubIndex][this
						.showTag
					])
				}
				this.$emit('finish', {
					'$index': this.currentIndex,
					...this.sortArr[this.currentSubIndex]
				})
				this.show = false
			},
			aceaConfirm(){
				if (this.isNeedChangeTitle) {
					this.updateArr.splice(this.currentIndex, 1, this.aceaConterArr[this.currentAceaAsideIndex][this.currentAceaConterIndex])
				}
				this.show = false
			},
			aceaReset(){
				this.show = false
			},
			filtrateConfirm(){
				// if (this.isNeedChangeTitle) {
				// 	this.updateArr.splice(this.currentIndex, 1, this.aceaConterArr[this.currentFiltrateAsideIndex][this.currentFiltrateConterIndex])
				// }
				this.show = false
			},
			filtrateReset(){
				this.show = false
			},
			bindFiltrateShow(){
				this.filtrateShow = true
			},
			bindFiltrateClose(){
				this.filtrateShow = false
			},
			maskClose() {
				if (!this.maskTouch) return
				this.show = false
			},
			//
			touchControl() {
				if (this.isTouchPrevent) {
					this.maskClose()
				}
			}
		}
	}
</script>

<style>
	.screen-bar {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 99;
		padding: 0 18rpx;
	}

	.screen-bar::after {
		position: absolute;
		content: '';
		width: 100%;
		height: 1rpx;
		/* background-color: #EEEEEE; */
		bottom: -1rpx;
		left: 0;
		z-index: 99;
	}

	.screen-bar-item {
		/* height: 100%; */
		display: flex;
		align-items: center;
		justify-content: center;
		height: 56rpx;
		opacity: 1;
		border-radius: 10rpx;
		background: rgba(247, 247, 247, 1);
		/* padding: 12rpx 24rpx; */
		padding: 12rpx 2rpx;

	}

	.screen-bar-item image {
		width: 24rpx;
		height: 24rpx;
		display: block;
		margin-left: 12rpx;
		transition: all .3s;
		flex-shrink: 0;
	}

	.dropdown-box {
		width: 100%;
		position: absolute;
		left: 0;
		z-index: 99;
		overflow: hidden;
	}

	.dropdown-item {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #111111;
		/* border-bottom: 1rpx solid #EEEEEE; */
	}

	.bg-mask {
		position: fixed;
		top: 220rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 98;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.bg-mask-show {
		visibility: visible;
		opacity: 1;
	}

	.bar-item-text {
		max-width: 120rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	
	/* 新增区域样式 */
	.acea-box {
		
	}
	.acea-box .aside{
		position: absolute;
		left: 0;
		top: 0;
		width: 200rpx;
		height: calc(100% - 160rpx);
		left: 0;
		bottom: 100rpx;
		border-right: 1px solid #f7f7f7;
		border-bottom: 1px solid #f7f7f7;
		/* background-color: #f7f7f7;
		overflow-y: auto;
		overflow-x: hidden; */
	}
	.acea-box .conter{
		height: calc(100% - 160rpx);
		position: absolute;
		margin: 0rpx 0 0 200rpx;
		padding: 0 14rpx;
		border-bottom: 1px solid #f7f7f7;
	}
	.acea-box .acea-btn{
		width: 100%;
		height: 160rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 0 18rpx;
	}
	.acea-box .acea-btn .reset{
		width: 45%;
		height: 100rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 100rpx;
		color: #0000ff;
		background: #F5F6FA;
	}
	.acea-box .acea-btn .confirm{
		width: 45%;
		height: 100rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 100rpx;
		color: #ffffff;
		background: #EE212D;
	}
	
	/* 筛选 */
	.filtrate-box{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #ffffff;
		z-index: 99;
	}
	.filtrate-box .aside{
		padding-top: 24rpx;
		position: absolute;
		left: 0;
		top: 0;
		width: 200rpx;
		height: calc(100% - 100rpx);
		left: 0;
		bottom: 100rpx;
		background: #F8F8F8;
		/* background-color: #f7f7f7;
		overflow-y: auto;
		overflow-x: hidden; */
	}
	.filtrate-box .aside .dropdown-item{
		background-color: #ffffff;
		margin-bottom: 12rpx;
		max-width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.filtrate-box .conter{
		height: calc(100% - 100rpx);
		position: absolute;
		margin: 0rpx 0 0 200rpx;
		padding: 24rpx 14rpx;
	}
	.filtrate-box .conter .dropdown-item{
		display: inline-block;
		width: 46%;
		background-color: #f6f6f6;
		margin-bottom: 18rpx;
		border-radius: 4rpx;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.filtrate-box .conter .dropdown-item:nth-child(2n){
		margin-right: 18rpx;
	}
	.filtrate-box .conter .conter-title{
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}
	.filtrate-box .conter .dropdown-item.on{
		background: rgba(255, 247, 248, 1);
		color: rgba(238, 33, 45, 1);
	}
	.filtrate-box .filtrate-btn{
		width: 100%;
		height: 100rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.filtrate-box .filtrate-btn .reset{
		width: 35%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #4b4b4b;
		background: #F5F6FA;
	}
	.filtrate-box .filtrate-btn .confirm{
		width: 65%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #ffffff;
		background: #EE212D;
	}
</style>
